<template>
  <div class="date-picker-inputbox">
    <ItDatepicker
      default-time="2022-02-01"
      placeholder="年/月/日"
      format="YYYY-MM-DD"
      @change="timeChange"
    ></ItDatepicker>
  </div>

  <div class="date-picker-inputbox">
    <ItDatepicker
      default-time="2022-02"
      mode="Picker-Months"
      placeholder="年/月"
      format="YYYY-MM"
      @change="timeChange"
    ></ItDatepicker>
  </div>
  <div class="date-picker-inputbox">
    <ItDatepicker
      default-time="2022"
      mode="Picker-Years"
      placeholder="年"
      format="YYYY年"
      @change="timeChange"
    ></ItDatepicker>
  </div>
  <div>选择了：{{ checkTime }}</div>
</template>
<script setup>
import { ItDatepicker } from '@/components'
import { ref } from 'vue'
const checkTime = ref('')
const timeChange = (val) => {
  checkTime.value = val
}
</script>
<style scoped>
.date-picker-inputbox {
  width: 342px;
  height: 50px;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border: 1px solid #d0d7e8;
  margin-bottom: 20px;
}
</style>
